<template>
<!-- 首页社团详情 -->
    <div style="width:100%;height:100%;background-color:#F8F8FF">
        <el-row style="width:100%;height:100%;overflow-x:hidden;overflow-y:auto;display:flex;flex-wrap: wrap" >
            <div class="borderstyle" style="height:42%;width:24.8%;margin-left:2px;margin-top:20px;" v-for="ass in this.allAssInfor" :key="ass.id" >
                <div style="width:100%;height:100%">
                    <div style="width:100%;height:80%">
                        <div style="width:100%;height:20%;"></div>
                        <!-- 社团名称展示 -->
                        <div style="width:100%;height:40%;text-align:center;color:black"><span style="font-size:25px;-webkit-text-stroke:0.5px black;-webkit-text-fill-color:transparent">{{ass.assName}}</span></div>
                        <!-- 社团负责人 -->
                        <div style="width:100%;height:30%"></div>
                    </div>
                    <div style="width:100%;height:20%;text-align: center.">
                        <el-button style="margin-left:80px" @click="lookUpAssInfo(ass.id)">了解社团详情</el-button>
                    </div>
                </div> 
            </div>
        </el-row>   

<!-- 、查看社团详情部分; -->
        <el-drawer
            size="40%"
            :visible.sync="drawer"
            :direction="direction"
            :show-colse="showButton">
            <!-- 社团相关信息详情展示 -->
            <el-row style="width:100%;height:100%">
                <el-col :span="1"><div class="grid-content bg-purple" style="height:300px"></div></el-col>
                <el-col :span="22">
                    <div class="grid-content bg-purple-light" style="height:300px">
                        <div class="panel panel-default">
                            <div class="panel-heading" >社团详情展示</div>
                            <!-- 社团详情 -->
                            <div class="panel-body" style="height:600px">
                                <el-descriptions direction="vertical" :column="3" border style="border:2px solid #DDDDDD;" v-for=" a in AssInforMation" :key="a.id">
                                    <el-descriptions-item label="社团名称">{{a.assName}}</el-descriptions-item>
                                        <el-descriptions-item label="社长大大">{{a.student.stuName}}</el-descriptions-item>
                                        <el-descriptions-item label="社团人数" :span="2">{{a.assPeopleNum}}</el-descriptions-item>
                                        <el-descriptions-item label="社团类别">
                                            <el-tag size="small">{{a.assCategory}}</el-tag>
                                        </el-descriptions-item>
                                    <el-descriptions-item label="社团宗旨">{{a.assIntroduce}}</el-descriptions-item>
                                    <el-descriptions-item label="社团成立时间">{{a.assTime}}</el-descriptions-item>
                                    <el-descriptions-item label="社团公告">
                                        <div style="height:300px;background-color:yellow">

                                        </div>
                                    </el-descriptions-item>
                                </el-descriptions>
                                
                            </div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="1"><div class="grid-content bg-purple" style="height:300px"></div></el-col>
            </el-row>
        </el-drawer> 
    </div>
</template>


<style>
.borderstyle {
   
    color: #DCDCDC;;
    border: 1px solid;
    border-radius: 15px;
    background-color: white;
}
</style>

<script>
export default {
    data(){
        return{
            showButton:false,
            drawer: false,
            direction: 'rtl',
            allAssInfor:[] , //全部社团总记;
            AssInforMation:[]  //被查看的社团详情;
        }
    },
    created(){
        this.lookupAllAssInfor();
    },
    methods:{
        // 查看指定的社团详情;
        lookUpAssInfo(id){
            
            this.$axios.get("http://localhost:8081/user/lookupAss",{
                params:{
                    id
                }
            }).then(res=>{
                this.AssInforMation=res.data.data;
                console.log(this.AssInforMation);
            })
            this.drawer=true;
        },
        // 查看全部的社团详情;
        lookupAllAssInfor(){
            this.$axios.get("http://localhost:8081/user/lookupAss",{
                // params:{
                //     // id:"3"
                // }
            }).then(res=>{
            
                this.allAssInfor=res.data.data;
                console.log(this.allAssInfor);
            })
        }
    }
}
</script>